﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>我秀地图</title>
    <meta charset="utf-8"/>
    <link href="../css/imap-gl.css" rel="stylesheet"/>
    <script src="../js/imap-gl.js"></script>
    <link href="http://172.192.100.51:50001/baidu-offline-map/offlinemap/css/map.css" rel="stylesheet"/>
    <script src="http://172.192.100.51:50001/baidu-offline-map/offlinemap/map_load.js"></script>


    <style>
        html, body {
            padding: 0;
            margin: 0;
        }

        #map2 {
            position: absolute;
            left: 0;
            height: 100%;
            width: 100%;
            float: left;
        }

        #map1 {
            position: absolute;
            left: 0;
            height: 100%;
            width: 50%;
            float: left;
        }

        .botton {
            position: absolute;
            right: 15px;
            top: 15px;
            padding: 5px 10px;

            border: 1px solid #0a6aa1;
            font-size: 15px;
            border-radius: 3px;
            cursor: pointer;
        }
    </style>
</head>

<body>
<div id="map1"></div>
<div id="map2"></div>
<div class="botton" onclick="go()" id="botton">双屏开启</div>
<script>
    var map1_x;
    var map1_y;
    var map1_zoom;
    var map2_x;
    var map2_y;
    var map2_zoom;
    var map1_pitch;
    var map2_pitch;
    var map1_bear;
    var map2_bear;
    var map, map2;

    function go() {
        var map22 = document.getElementById("map2");
        var map11 = document.getElementById("map1");
        var bottt = document.getElementById("botton")
        if (!window.mp2) {
            map11.style.display = "block";

            map22.style.width = "50%";
            map22.style.left = "50%";
            window.mp2 = "1";

            bottt.innerText = "双屏关闭";
        } else {
            map11.style.display = "none";

            map22.style.width = "100%";
            map22.style.left = "0";
            window.mp2 = "";

            bottt.innerText = "双屏开启";
        }


        map22.addEventListener("mousemove", function (e) {
            //  console.log(e.layerX, e.layerY);
            if (window.mp2) {
                if (!window.img) {
                    window.img = document.createElement("img");
                    window.img.src = "../images/WechatIMG2.png";
                    window.img.style.width = "24px";

                    var body = document.getElementsByTagName("body")[0];
                    body.appendChild(window.img);
                } else {
                    window.img.style.position = "absolute";
                    window.img.style.left = (e.layerX + 6) + "px";
                    window.img.style.top = (e.layerY - 6 ) + "px";
                }
            } else {
                if (window.img)window.img.style.left = "-100px"
            }
        })

        map11.addEventListener("mousemove", function (e) {
            //  console.log(e.layerX, e.layerY);
            if (window.mp2) {
                if (!window.img) {
                    window.img = document.createElement("img");
                    window.img.src = "../images/WechatIMG2.png";
                    window.img.style.width = "24px";

                    var body = document.getElementsByTagName("body")[0];
                    body.appendChild(window.img);
                } else {
                    window.img.style.position = "absolute";
                    window.img.style.left = (window.innerWidth/2+e.layerX + 6) + "px";
                    window.img.style.top = (e.layerY - 6 ) + "px";
                }
            } else {
                if (window.img)window.img.style.left = "-100px"
            }
        })

        doResize();

    }
    ;

    function initRightMap() {
        map2 = new imapgl.Map({
            container: 'map2',
            center: [105.27771321722543, 39.952128183377255],
            zoom: 3,
            style: "../styles/v1/light-v10-gcj02.json"
        });
        map2.on('render', function (e) {
            var res = CoordinateUtil.gcj02tobd09(map2.getCenter().lng, map2.getCenter().lat);
            map.centerAndZoom(new BMap.Point(res.lng, res.lat), map2.getZoom() + 2);
        });

    }


    function initLeftMap() {
        // 百度地图API功能
        map = new BMap.Map("map1");    // 创建Map实例
        map.centerAndZoom(new BMap.Point(105.27771321722543, 39.952128183377255), 3);  // 初始化地图,设置中心点坐标和地图级别
        //map.setCurrentCity("武汉");          // 设置地图中心显示的城市 new！
        map.enableScrollWheelZoom(false);     //开启鼠标滚轮缩放
        //map.addControl(new BMap.NavigationControl());   //缩放按钮
        map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]}));   //添加地图类型控件 离线只支持普通、卫星地图; 三维不支持

        //监听地图缩放
        //map.addEventListener("zoomend", function(){
        //	if( this.getZoom() > 8 ) {
        //		layer.msg("默认只有8级地图, 超过无法显示");
        //	}
        //});
        map.addEventListener("dragend", function () {
            var center = map.getCenter();
            var res = CoordinateUtil.bd09togcj02(center.lng, center.lat);
            map2.setCenter([res.lng,res.lat]);
        });
        map.addEventListener("zoomend", function () {
            var zoom = map.getZoom();
            map2.setZoom(zoom-2);
        });
    }

    var CoordinateUtil = {
        x_pi: 3.14159265358979324 * 3000.0 / 180.0,
        //pai
        pi: 3.1415926535897932384626,
        //离心率
        ee: 0.00669342162296594323,
        //长半轴
        a: 6378245.0,
        //百度转国测局
        bd09togcj02: function (bd_lon, bd_lat) {
            var x = bd_lon - 0.0065;
            var y = bd_lat - 0.006;
            var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * CoordinateUtil.x_pi);
            var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * CoordinateUtil.x_pi);
            var gg_lng = z * Math.cos(theta);
            var gg_lat = z * Math.sin(theta);
            return {
                lng: gg_lng,
                lat: gg_lat
            }
        },
        //国测局转百度
        gcj02tobd09: function (lng, lat) {
            var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * CoordinateUtil.x_pi);
            var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * CoordinateUtil.x_pi);
            var bd_lng = z * Math.cos(theta) + 0.0065;
            var bd_lat = z * Math.sin(theta) + 0.006;
            return {
                lng: bd_lng,
                lat: bd_lat
            };
        },
        //国测局转84
        gcj02towgs84: function (lng, lat) {
            var dlat = CoordinateUtil.transformlat(lng - 105.0, lat - 35.0);
            var dlng = CoordinateUtil.transformlng(lng - 105.0, lat - 35.0);
            var radlat = lat / 180.0 * CoordinateUtil.pi;
            var magic = Math.sin(radlat);
            magic = 1 - CoordinateUtil.ee * magic * magic;
            var sqrtmagic = Math.sqrt(magic);
            dlat = (dlat * 180.0) / ((CoordinateUtil.a * (1 - CoordinateUtil.ee)) / (magic * sqrtmagic) * CoordinateUtil.pi);
            dlng = (dlng * 180.0) / (CoordinateUtil.a / sqrtmagic * Math.cos(radlat) * CoordinateUtil.pi);
            var mglat = lat + dlat;
            var mglng = lng + dlng;
            return {
                lng: lng * 2 - mglng,
                lat: lat * 2 - mglat
            };
        },
        //经度转换
        transformlat: function (lng, lat) {
            var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
            ret += (20.0 * Math.sin(6.0 * lng * CoordinateUtil.pi) + 20.0 * Math.sin(2.0 * lng * CoordinateUtil.pi)) * 2.0 / 3.0;
            ret += (20.0 * Math.sin(lat * CoordinateUtil.pi) + 40.0 * Math.sin(lat / 3.0 * CoordinateUtil.pi)) * 2.0 / 3.0;
            ret += (160.0 * Math.sin(lat / 12.0 * CoordinateUtil.pi) + 320 * Math.sin(lat * CoordinateUtil.pi / 30.0)) * 2.0 / 3.0;
            return ret;
        },
        //纬度转换
        transformlng: function (lng, lat) {
            var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
            ret += (20.0 * Math.sin(6.0 * lng * CoordinateUtil.pi) + 20.0 * Math.sin(2.0 * lng * CoordinateUtil.pi)) * 2.0 / 3.0;
            ret += (20.0 * Math.sin(lng * CoordinateUtil.pi) + 40.0 * Math.sin(lng / 3.0 * CoordinateUtil.pi)) * 2.0 / 3.0;
            ret += (150.0 * Math.sin(lng / 12.0 * CoordinateUtil.pi) + 300.0 * Math.sin(lng / 30.0 * CoordinateUtil.pi)) * 2.0 / 3.0;
            return ret;
        },
        getWgs84xy: function (x, y) {
            //先转 国测局坐标
            var doubles_gcj = CoordinateUtil.bd09togcj02(x, y); //（x 117.   y 36. ）
            //国测局坐标转wgs84
            var doubles_wgs84 = CoordinateUtil.gcj02towgs84(doubles_gcj.lng, doubles_gcj.lat);
            //返回 纠偏后 坐标

            return doubles_wgs84;
        }
    };

    initRightMap();

    initLeftMap();

    function doResize() {
        setTimeout(function () {
            //手动触发窗口resize事件
            if (document.createEvent) {
                var event = document.createEvent("HTMLEvents");
                event.initEvent("resize", true, true);
                window.dispatchEvent(event);
            } else if (document.createEventObject) {
                window.fireEvent("onresize");
            }
        }, 100);
    }

</script>
</body>


</html>

